﻿<%@ page language="C#" autoeventwireup="true" inherits="Default_MemberPhoto, App_Web_e1jp1m1s" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <%=MainCss%>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/main.js" type="text/javascript"></script>
    <style type="text/css">
        .index_wrapper,body{background:#000}
        .wrapper{ padding:0px; margin:0px;}
        .content{width:100%; height:100px; border:solid 1px #ddd; margin-top:5px;}
        .div1{
            height: 32px;
            width: 32px;
            position:relative;
            margin:0 auto;
        }
        .div2{
            text-align:center;
        }
        .div2 img{ width:32px;}
        .inputstyle{
            width: 32px;
            height: 32px;
            outline: medium none;
            position: absolute;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            opacity:0; 
            left:0px;
            top: 0px;
        }
        .box{ font-size:13pt; padding:5px 0;}
        .border{ border:solid 1px #ddd; padding:5px;}
        
        #clipArea {
            height: 400px;
        }
    </style>
    
</head>

<body>

<div class="index_wrapper">

<header class="android">

    <div class="topbar">
        <a href="MemberDetail.aspx" class="back_btn"><i class="icon iconfont">&#xf0115;</i></a>
        <a href="javascript:;" class="top_home"></a>
        <h1 class="page_title"><asp:Label ID="lblTitle" runat="server"></asp:Label></h1>
    </div>

</header>
    
    <form id="form1" runat="server">
        
    <div id="clipArea" runat="server"></div>
    <div id="view" style="display:none"></div>

    <div style="display:none">

        <asp:TextBox ID="txtImage" runat="server" TextMode="MultiLine"></asp:TextBox>
        
        <input type="button" name="btnUploadFile" id="btnUploadFile" runat="server" value="" class="button1" style="display:none;" />
        
    </div>
    
    <asp:Panel ID="panComment" runat="server" style="position:fixed; bottom:0px; width:100%; left:0px; padding:3px 0; background:#fff;">
        <table style="width:100%;">
            <tr>
                <td style="text-align:center; width:50%">
                    <div class="div1">
                        <div class="div2"><img src="images/photo_upload.png" alt="" style="width:30px; height:30px;" /></div>
                        <input type="file" id="file" class="inputstyle">
                    </div>
                </td>
                <td style="text-align:center; width:50%">
                    <a id="clipBtn" href="javascript:;"><img src="images/photo_save.png" style="width:30px; height:30px;" alt="保存" /></a>
                </td>
            </tr>
                 
        </table>
    </asp:Panel>
        
    </form>
    
    <div class="loading" style="display:none"></div>

    <script src="js/hammer.min.js"></script>
    <script src="js/iscroll-zoom-min.js"></script>
    <script src="js/lrz.all.bundle.js"></script>
    <script src="js/PhotoClip.js"></script>

    <script>

        var pc = new PhotoClip('#clipArea', {
            size: 300,
            outputSize: 640,
            file: '#file',
            view: '#view',
            ok: '#clipBtn',
            loadStart: function () {
                $('.loading').show();
            },
            loadComplete: function () {
                $('.loading').hide();
            },
            done: function (dataURL) {
                document.getElementById("txtImage").value = dataURL;
                if (dataURL != "") {
                    ShowLoading(document.getElementById('btnUploadFile'), '上传中，请稍等...');
                    __doPostBack('btnUploadFile', '');
                }
            },
            fail: function (msg) {
                alert(msg);
            }
        });

        pc.load('<%=imgPhoto%>');

	    $('#clipArea').css('margin-top', ($('body').height() - 40 - $('#clipArea').height()) / 2 + 'px');

    </script>
    
</div>

<div style="height:60px;"></div>

</body>

</html>